﻿<div class="w-1">
    <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto" />
</div>
<button onclick="addPoint();">增加</button>
@section Script{
    <script type="text/javascript">
        var chart;
        function addPoint() {
            debugger;
            //redraw 是否重画，cover是否左移
            chart.series[0].addPoint([new Date(chart.series[0].data[chart.series[0].data.length - 1].x + 24 * 3600 * 1000), 222],
                false, false);

            chart.redraw();
        }
        Highcharts.setOptions({  
            global: {  
                useUTC: false  
            }  
        });  
        $(document).ready(function () {
            chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'container',
                    zoomType: 'x',
                    type: 'line'
                },
                title: {
                    text: 'YunYao Live'
                },
                subtitle: {
                    text: 'Node xxxxx'
                },
                xAxis: {
                    title: {
                        text: 'Month'
                    },
                    //dateTimeLabelFormats: { //force all formats to be hour:minute:second
                    //    second: '%H:%M:%S',
                    //    minute: '%H:%M:%S',
                    //    hour: '%H:%M:%S',
                    //    day: '%H:%M:%S',
                    //    week: '%H:%M:%S',
                    //    month: '%H:%M:%S',
                    //    year: '%H:%M:%S'
                    //},
                    type: 'datetime',
                    //maxZoom: 14 * 24 * 3600000
                    maxZoom: @ViewBag.MaxSecond * 1000
                },
                yAxis: {
                    title: {
                        text: 'Temperature (°C)'
                    },
                    plotLines: [{
                        value: 0,
                        width: 1,
                        color: '#808080'
                    }]
                },
                tooltip: {
                    formatter: function () {
                        return "tooltip";
                    }
                },
                legend: {
                    enabled: false
                },
                plotOptions: {
                    series: {
                        pointInterval: @ViewBag.IntervalSecond * 1000,
                        pointStart: @ViewBag.StartTime
                        }
                },
                series: [{
                    name: '@ViewBag.Node',
                    data:[]
                    //data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
                }]
            });
            // setTimeout(getNodeValue, 2000);
            var data = @Html.Raw(@Model);
            appentPoint(data);
            getNodeValue();
        });

        function appentPoint(data){
            for(var i=0;i<data.length;i++){
                chart.series[0].addPoint([data[i].timestamp, data[i].value],false, false);
            }
            chart.redraw();
        }
        var url = "@Url.Action("Index", "Node", new { node = @ViewBag.Node, interval = @ViewBag.Interval })"
        function getNodeValue() {
            var jsonUrl=url;
            if (chart.series[0].data.length > 0) {
                jsonUrl += "/"+chart.series[0].data[chart.series[0].data.length - 1].x;
            }
            $.getJSON(jsonUrl, function (data) {
                appentPoint(data);
                getNodeValue();
            });
        }

    </script>
}